<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script src="./lib/echarts.min.js"></script>
  <script>
    const myChart = echarts.init(document.getElementById('main'));
    const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['Forest', 'Steppe', 'Desert', 'Wetland']
  },
  // toolbox: {
  //   show: true,
  //   orient: 'vertical',
  //   left: 'right',
  //   top: 'center',
  //   feature: {
  //     mark: { show: true },
  //     dataView: { show: true, readOnly: false },
  //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
  //     restore: { show: true },
  //     saveAsImage: { show: true }
  //   }
  // },
  xAxis: [
    { axisLine:{
      lineStyle:{
        type:'dashed',
      }
    },
      type: 'category',
      axisTick: { show: false },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri','Sun','Wed'],
      axisLabel: {
      color: "rgba(58, 173, 222, 1)"
    }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      // name: 'Desert',
      type: 'bar',
      // label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190,251,200],
      showBackground:true,
    },
    {
      // name: 'Wetland',
      type: 'bar',
      // label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [98, 177, 101, 59, 140,100,256],
      showBackground:true,
    }
  ],
  color:[
    // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0, color: 'skyblue' // 0% 处的颜色
  }, {
      offset: 1, color: 'white' // 100% 处的颜色
  }],
  global: false // 缺省为 false
},
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
{
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.5,
  colorStops: [{
      offset: 0, color: 'azure' // 0% 处的颜色
  }, {
      offset: 1, color: 'silver' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}
    ]
}; 

    myChart.setOption(option);
  </script>
</body>
</html>